<template>
    <div class="addSystem">
        <!--添加数据弹出层-->
        <div class="toolbar">
            <Modal
                    v-model="showAddForm"
                    title="添加"
                    :loading="loading"
                    :mask-closable="maskClosable"
                    :closable="false"
            >
                <div slot="header">
                    <div class="ivu-modal-header-inner">新增菜单</div>
                    <a class="ivu-modal-close" @click="cancel"><i class="ivu-icon ivu-icon-ios-close-empty"></i></a>
                </div>
                <Form ref="addData" :model="addData" :label-width="80" :rules="ruleCustom" >
                    <FormItem label="系统名称:" prop="menuSysName">
                        <Select v-model="model1" placeholder="请选择系统"  >
                            <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="所属菜单:" prop="sysName">
                        <Select v-model="model1" placeholder="请选择功能所属二级菜单"  >
                            <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="菜单名称:" prop="menuName">
                        <Input class="modalInput" v-model="addData.menuName" placeholder="菜单名称"></Input>
                    </FormItem>
                    <FormItem label="菜单编号:" prop="menuNumber">
                        <Input class="modalInput"  v-model="addData.menuNumber" placeholder="菜单编号"></Input>
                    </FormItem>
                    <FormItem label="菜单图标:" prop="menuIonic">
                        <Input class="modalInput"  v-model="addData.menuIonic" placeholder="菜单图标"></Input>
                        <Icon class="uplodImg" type="image"></Icon>
                    </FormItem>
                    <FormItem label="链接地址:" prop="menuUrl">
                        <Input class="modalInput"  v-model="addData.menuUrl" placeholder="链接地址"></Input>
                    </FormItem>
                    <FormItem label="菜单说明:" prop="menuDescribe">
                        <Input class="modalInput"  v-model="addData.menuDescribe" placeholder="菜单说明"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" size="large" :loading="modalLoading"  @click="ok('addData')" >确定</Button>
                    <Button size="large" @click="cancel">取消</Button>

                </div>
            </Modal>
        </div>

    </div>
</template>

<script>
    import util from '../../libs/util'
    export default {
        name: 'addSystem',
        data () {
            return {
                loading: true,
                modalLoading:false,
                maskClosable:false,
                model1: '',
                systemName: [
                    {
                        value: 'xuanz',
                        sysName: '请选择系统名称'
                    },
                    {
                        value: 'zg',
                        sysName: '租管'
                    },
                    {
                        value: 'jr',
                        sysName: '金融'
                    },
                    {
                        value: 'zhzx',
                        sysName: '账户中心'
                    },
                    {
                        value: 'jszx',
                        sysName: '结算中心'
                    }
                ],
                addData: {
                    'menuName':'',
                    'menuNumber': '',
                    'menuIonic':'',
                    'menuUrl':'',
                    'menuDescribe':''
                }, //添加的数据
                ruleCustom: {
                    menuName: [
                        { required: true, message: '请填写菜单名称', trigger: 'blur' }
                    ],
                    menuNumber: [
                        { required: true, message: '请填写菜单编号', trigger: 'blur' }
                    ],
                    menuIonic: [
                        { required: true, message: '请上传菜单图标', trigger: 'blur' }
                    ],
                    menuUrl: [
                        { required: true, message: '请填写链接地址', trigger: 'blur' }
                    ]
                }
            }
        },
        props: ['showAddForm'],
        methods: {
            ok (name) {
//        var self = this;
//        this.$emit("changeShow", self.showAddForm);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = '/react-service/api/houseInfo/getDetail.do'
                        /*获取到添加的数据*/
                        alert('添加的数据为' + JSON.stringify(this.addData))
                        let data = this.addData
                        console.log(this.addData)
                        /*请求接口*/
                        util.ajax.post(url, data).then((res) => {
                            console.log(res)
                        })
                        this.$emit('reset', true)
                        /*获取最新数据*/
//                       this.getInfo()
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            cancel() {
                this.$emit('reset')
            }
        },
        watch: {
            showAddForm() {
                if(this.showAddForm) {
                    this.$refs['addData'].resetFields(); // 每次进来重置表单数据
                }
            }
        }
    }
</script>


<style scoped>
.uplodImg{
    position: absolute;
    right: 10px;
    top: 8px;
    display: inline-block;
    font-size: 18px;
}
</style>
